<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-03 22:21:23
-->
<template>
    <div class="videores">
        <div v-if="info.videos.length != 0">
            <div class="count">
                <span>找到{{ info.videosCount }}个视频</span>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in info.videos" :key="index">
                    <mvlist :item="item"></mvlist>
                </div>
            </div>
            <Pagination :total="info.videosCount" :page-size="40" :current-page="info.currentPage"
                @handleCurrentChange="getSearchVideoBy"></Pagination>
        </div>

        <div class="no" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchVideo } from '@/api/searchdetail/searchdetail.js'
import Pagination from '../../../components/content/Pagination.vue'
import mvlist from '@/components/content/MVlist/mvlist.vue'
const route = useRoute()
const info = reactive({
    keyword: '',
    videos: [],
    videosCount: 0,
    currentPage: 1,
})

//获取视频数据
async function getSearchVideoBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 40
    let res = await getSearchVideo(info.keyword, offset)
    if (res.data.code === 200) {
        info.videos = res.data.result.videos
        info.videosCount = res.data.result.videoCount
    }
}

onMounted(() => {
    info.keyword = route.params.keywords
    getSearchVideoBy()
})

</script>

<style lang="scss" scoped>
.videores {
    position: relative;

    .count {
        position: absolute;
        top: -35px;
        right: 20px;
        font-size: 14px;
        color: #c0bebe;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item{
            margin-bottom: 10px;
        }
    }

    .no {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}
</style>